<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
        list-style: none;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        position: relative;
    }

    #box222 {
        width: 400px;
        height: 200px;
        border: 1px solid #ccc;
        background: white;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #xuanze {
        /* background: #498e3d; */
        border-radius: 5px;
        position: absolute;
        top: 30px;
    }

    #btn22 {
        position: absolute;
        bottom: 20px;
    }
</style>

<body>
    <div id="box222">
        <div id="xuanze">请选择地区</div>
        <select name="" id="selProvince">
            <option value="" class="opt" id="opt1">----请选择省----</option>
        </select>
        <select name="" id="selCity">
            <option value="" class="opt" id="opt2">----请选择市----</option>
        </select>
        <select name="" id="selCountry">
            <option value="" class="opt" id="opt3">----请选择县----</option>
        </select>
        </label>
        <input type="button" value="点击提交" id="btn22">

    </div>

</body>

</html>
<script>
    { //城市三级联动
        $(".opt").click(function (e) {
            alert('请选择城市')
        });
        var iNum1;
        var iNum2;
        var aProvince = ['湖北', '江苏', '安徽'];
        var aCity = [
            ['武汉', '黄冈', '荆门'],
            ['南京', '无锡', '镇江'],
            ['合肥', '安庆', '黄山']
        ];
        var aCountry = [
            [
                ['武汉1', '武汉2'],
                ['黄冈1', '黄冈2'],
                ['荆门1', '荆门2']
            ],
            [
                ['南京1', '南京2'],
                ['无锡1', '无锡2'],
                ['镇江1', '镇江2']
            ],
            [
                ['合肥1', '合肥2'],
                ['安庆1', '安庆2'],
                ['黄山1', '黄山2']
            ]
        ];

        $(function () {
            for (var i = 0; i < aProvince.length; i++) {
                $('#selProvince').append('<option>' + aProvince[i] + '</option>');
            };
            $('#selProvince').change(function () {
                $('#selCity').children().not(':eq(0)').remove();
                $('#selCountry').children().not(':eq(0)').remove();
                iNum1 = $(this).children('option:selected').index();
                var aaCity = aCity[iNum1 - 1];
                for (var j = 0; j < aaCity.length; j++) {
                    $('#selCity').append('<option>' + aaCity[j] + '</option>');
                }
            });
            $('#selCity').change(function () {
                $('#selCountry').children().not(':eq(0)').remove();
                iNum2 = $(this).children('option:selected').index();
                var aaCountry = aCountry[iNum1 - 1][iNum2 - 1];
                for (var k = 0; k < aaCountry.length; k++) {
                    $('#selCountry').append('<option>' + aaCountry[k] + '</option>');
                }
            })
        });


    } {
        $('#btn22').click(function (e) {
            localStorage.usersheng = $('#selProvince').val();
            localStorage.usershi = $('#selCity').val();
            localStorage.userxian = $('#selCountry').val();
            if ($('#selProvince').val()) {

            } else {
                localStorage.usersheng = '请选择城市';
            }
            $('#chengs').html(localStorage.usersheng);
            $('#myModal').modal('hide')
        });
    }
</script>